<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .w{
            display:flex;
            /*改变主轴方向*/
            flex-direction: column-reverse;

            /*设置项目再主轴上的对齐方式*/
            /*默认值，在主轴开始的地方开始*/
           /* justify-content: flex-start;
            /*在株洲结束的地方开始排列*/
          /*  justify-content: flex-end;
            /*沿主轴居中显示*/
           /* justify-content: center;

            /*平分空白作为间距，元素之间的空白看起来要多一倍*/
          /*  justify-content: space-around;
            /*两端元素靠边，平分剩余空间作为元素的间距*/
            justify-content: space-between;

            /*完全平分剩余空间作为间距*/
            /*justify-content: space-evenly;*/
            width:1220px;
            height:800px;
            background-color: darkred;
            margin:0 auto;
        }
        .item{
            width:100px;
            height:100px;
            background-color: #ff8500;
        }

    </style>
</head>
<body>
<div class="w">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>

</div>
</body>
</html>